<template>
	<view class="list-info" @click="onItemClick(orderInfo)">
		<view class="info-wrap">
	
		<image :src="eyeOpen?orderInfo.cover:`${baseImageUrl}/main/main_logo.png`" class="item-img" mode="aspectFill"></image>
		<view style="display: flex;flex-direction: column;flex: 1;margin-right: 32rpx;">
			<view class="title-wrap" style="display: flex;justify-content: space-between;">
				<view class="item-title">{{eyeOpen?orderInfo.title:'用卷卷，选品更轻松爆单更容易'}}</view>
				<view @click.stop="changeEye" class="eye" style="margin: 0 9rpx 0 30rpx;">
					<image style="width: 35rpx;height: 35rpx;" :src="eyeOpen?`${baseImageUrl}/main/eye-fill.png`:`${baseImageUrl}/main/eye-close.png`" mode="aspectFit"></image>
				</view>
			</view>
			<view style="display: flex;align-items: center;font-size: 20rpx;margin-top: 20rpx;">
				<image v-if="orderInfo.flowPointStr!='退款'" class="item-status-image" src="../../static/main/icon_order_status.png"></image>
				<text  :style="{color:orderInfo.flowPointStr=='退款'?'red':'#666666'}">{{orderInfo.flowPointStr}}</text>
				<text style="color: #999999;flex: 1;text-align: right;">{{orderInfo.paySuccessTime}}  付款</text>
			</view>
		</view>
			</view>

	<view class="money" style="display: flex;margin-top: 32rpx;padding: 0 60rpx 10rpx;">
		<view class="item-sub-group">
			<text style="color: #666666;font-size: 20rpx;line-height: 32rpx;">付款金额</text>
			<view style="display: flex;margin-top: 8rpx;">
				<text style="margin-top: 2rpx;font-size: 22rpx;">¥</text>
				<text>{{orderInfo.totalPayAmount}}</text>
			</view>
		</view>
		<view style="flex: 1;"></view>
		<view class="item-sub-group">
			<text style="color: #666666;font-size: 20rpx;line-height: 32rpx;">佣金率</text>
			<view style="display: flex;margin-top: 8rpx;">
				<text style="color: #666666;font-size: 24rpx;font-weight: bold;">{{orderInfo.kolCosRatio}}%</text>
			</view>
		</view>
		<view style="flex: 1;"></view>
		<view class="item-sub-group">
			<text style="color: #666666;font-size: 20rpx;line-height: 32rpx;">佣金收入</text>
			<view style="display: flex;margin-top: 8rpx;">
				<text style="margin-top: 2rpx;font-size: 22rpx;">¥</text>
				<text>{{orderInfo.kolCosFee}}</text>
			</view>
		</view>
	</view>
	

		</view>
	
</template>

<script>
		import configUrls from '@/common/config.js';
	export default {
		props: {
			eyeOpen:true,
			orderInfo: {
				type: Object,
				default() {
					return {}
				}
			},
		},
		data() {
			return {
				baseImageUrl: configUrls.baseImageUrl,
			}
		},
		methods: {
			changeEye(item){
				this.$emit('changeEye',item);
			},
			onItemClick(item){
				this.$emit('onItemClick',item);
			}
		}
	}
</script>

<style>
	.list-info {
		
	}
	.info-wrap{
		display: flex;
		flex-direction: row;
		margin-top: 16rpx;
		margin-bottom: 16rpx;
		
	}
	.item-img {
		width: 100rpx;
		height: 100rpx;
		margin-left: 32rpx;
		/* border-radius: 32rpx; */
		margin-right: 24rpx;
	}
	.item-title {
		color: #333333;
		font-size: 25rpx;
		line-height: 39rpx;
		margin-bottom: 8rpx;
		font-family: PingFang SC;
		font-weight: 500;
		white-space: pre-wrap;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}
	.item-status-image {
		width: 24rpx;
		height: 24rpx;
		margin-right: 8rpx;
	}
	.item-sub-group {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		font-family: MiSans-Regular, MiSans;
		font-weight: 400;
		color: #EE0A24;
		line-height: 38rpx;
	}
</style>
